import React, { FC } from 'react';

if (process.env.BROWSER) {
    require('./module-box.scss');
}

const COM_PREKEY = 'CommonModuleBox';

interface CommonModuleBoxProps {
    title?: string;

    specialClassName?: string;

    /**
     * @default is ml-12
     */
    specialTitleLineClassName?: string;
}

const CommonModuleBox: FC<CommonModuleBoxProps> = (props) => {
    return (
        <div
            className={`module-box${
                props.specialClassName?.toString()?.trim()?.length > 0
                    ? ` ${props.specialClassName}`
                    : ''
            }`}
        >
            {props.title?.toString()?.trim()?.length > 0 && (
                <div className="module-title">
                    <span className="title-text">{props.title}</span>
                    <span
                        className={`title-line ${
                            props.specialTitleLineClassName?.toString()?.trim()?.length > 0
                                ? props.specialTitleLineClassName
                                : 'ml-12'
                        }`}
                    />
                </div>
            )}
            <div className="module-content-box">{props.children}</div>
        </div>
    );
};

CommonModuleBox.displayName = 'CommonModuleBox';

export { CommonModuleBox, CommonModuleBoxProps };
